import { Ref } from 'vue'

/**
 * 跟随浏览器窗口大小的改变而进行相应处理的处理器
 *
 * @param handler 浏览器窗口大小变化后执行的处理函数，
 * 会向该函数传递两个参数：浏览器窗口的宽度和高度（均为 Ref<number> 类型）
 */
const HandlerWithWindowSize = (handler: (width: Ref<number>, height: Ref<number>) => void) => {
  // 获取响应式浏览器窗口的宽度
  const { width, height } = useWindowSize()
  // 监听浏览器窗口宽度的变化，进行相应处理
  watchEffect(() => {
    // 调用处理器函数
    handler(width, height)
  })
}

export default HandlerWithWindowSize
